<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
<link rel="stylesheet" href="css/comment.css">
<link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
     <!-- nav 导航栏 -->
     <div class="nav">
        <img src="img\用研.png" alt="">
        <span>我的博客系统</span>
        <!-- spacer 不实现任何内容,只是占位,将a标签顶到右边 -->
        <!-- 本来div是块级元素在竖直方向上排列,但是,这里已经将nav处理成弹性布局,因此在nav这个容器里的元素都会是水平排列 -->
        <div class="spacer"> </div>
        <a href="">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="">注销</a>
    </div>

     <!-- 这个div表示页面的主区域(版心) -->
     <div class="container">
        <!-- 左侧用户信息 -->
        <div class="container-left">

            <!-- 在left区域的card -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="img/蔡徐坤.png" alt="">
                <!-- 用户的名字 -->
                <h3>邓辉</h3>
                <!-- Gitee地址 -->
                <a href="#">Gitee地址</a>
                <!-- 两行两列 -->
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>3</span>
                </div>

            </div>

        </div>
        <!-- 右侧内容区域 -->
        <div class="container-right">
            
           <div class="detail">
             <!-- <h3 class="title">我的博客</h3> -->
             <div class="title">我的博客</div>


             <div class="date">2022-11-07 12:00:00</div>
             <div class="desc">从今天开始认真写博客Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam impedit maiores similique illo, dolorem cumque, perspiciatis vero veritatis iure odio atque fugiat asperiores modi a architecto recusandae officiis magnam porro?
                 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus, accusamus at rem blanditiis laudantium similique accusantium optio illum corrupti sed praesentium cumque. Ab placeat quo quod adipisci maiores voluptates molestiae.
                 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci, modi? Impedit quisquam quae, natus saepe minima eaque voluptatem ex quam, alias consequatur repudiandae eius officiis ab animi dolorem magni nam!
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum iste nesciunt id mollitia, magnam sunt impedit, fuga adipisci voluptas maiores obcaecati numquam aperiam ipsa ab totam! Aspernatur, illum. Nobis, doloremque.
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos consequuntur vitae, ea praesentium facere quae totam eius pariatur repellendus facilis mollitia, quo laboriosam dignissimos sapiente quia ut voluptatibus ipsa possimus!
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda consequuntur nostrum porro ea tempore id. Voluptatibus mollitia dolorem totam quis esse ipsum, maxime officiis quasi libero et ea quaerat vitae.
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi culpa assumenda quidem similique velit sit placeat ad inventore laboriosam et exercitationem accusamus quia a, eligendi ratione quasi ipsum dolor doloremque!
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi nostrum molestiae dignissimos ex a error optio, enim iure delectus qui cum praesentium eius laudantium odio deserunt similique obcaecati necessitatibus officiis.
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, molestias! Facere, excepturi! Ducimus suscipit dolor aperiam eum iure sapiente molestias ullam obcaecati similique eos iste ut, labore quisquam aut illo?
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. In aspernatur nemo eius dolor ducimus optio officiis hic iusto! Eaque et perferendis quae placeat aperiam a earum soluta magni quasi dolorem?
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, laborum veniam. Dolore ad commodi quas sed numquam accusantium iste, asperiores saepe quod explicabo voluptatibus est consequatur a distinctio molestias qui!
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, doloribus quis. Ducimus eum nulla aperiam provident nam temporibus iure earum, at sit minus distinctio ex architecto tenetur hic dolorum ipsam!
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, unde nobis! Commodi maxime delectus excepturi iure cupiditate dolor inventore natus asperiores, doloremque consectetur nisi exercitationem optio dolorum praesentium, dicta quis?
             </div>
           </div>

        </div>


    </div>
    


    
</body>
</html>